0. 評估運用
- 優點:
- 不用再寫CSS 了 可以大量減少css碼,但相對的html會增加
- 不須為命名苦惱
- 訂製化程度高,可以增加自己喜歡的間距等
- 缺點:
- 類名很長
- 無法一次修改,除非用 @apply 創建其他類名 (ex: btn / alert )
1. 資源
tailwind
tailwindtoolbox
tailwind github
tailwindcomponents
2. VS code
Tailwind CSS Explorer 查找表
Tailwind CSS IntelliSense 提示字
3. 安裝
如果是用 nuxt 不要直接選 tailwind 因為它會安裝1.x 版本 (此版本的客製化擴充有缺少)
nuxtjs 安裝
npm install -D @nuxtjs/tailwindcss tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
3-1. 原先文件 tailwind.css / 設置文件
@tailwind base;
@tailwind components;
@tialwind utilities;
3-2. 配置文件 nuxt.config.js
$ npx tailwindcss init
buildModules: [
'@nuxtjs/tailwindcss'
],
build: {
extractCSS: true //SSR 模式下 會建議開啟分別載入
}
3-3. 配置文件 tailwind.config.js
module.exports = {
purge: [
'./components/**/*.{vue,js}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}',
],
darkMode: false,
theme: {
fontFamily: {
sans: ['Noto Sans TC', '微軟正黑體', 'sans-serif'] //改預設字體
zcool: ['ZCOOL XiaoWei', 'sans-serif']
},
boxShadow: {
// ....沒法用擴充方式新增如果要沿用得先載入
'customer': '0 3px 6px 0 rgba(0, 0, 0, 0.2)',
},
screens: {
sm: '640px',
md: '992px',
lg: '1200px',
xl: '1460px',
},
spacing: {
// ....沒法用擴充方式新增如果要沿用得先載入
'40p': '40%',
'75p': '75%',
'100p': '100%',
'120p': '120%',
'136p': '136%',
},
extend:{
// ....擴充
margin: {
'30': '120px'
},
spacing: {
'pb-40p': '40%'
},
colors: {
customer:{
primary: '#6A483E',
secondary: '#EC964B',
'light-primary' : '#B28F85',
gray: '#F2F2F2',
black: '#433D3B',
}
},
backgroundImage: theme => ({
'index-partner': "url('/image/index/3-01.jpg')",
'index-investor-1': "url('/image/index/4-01.jpg')",
'index-investor-2': "url('/image/index/4-02.jpg')",
'index-investor-3': "url('/image/index/4-03.jpg')",
}),
height: {
'600px': '600px',
'400px': '400px',
'full-72px': 'calc(100% - 72px)'
},
lineHeight: {
'0': '0',
},
fontSize: {
'pc-h1': ['45px','76.5px'],
'pc-h2': ['30px','51px'],
'pc-h3': ['28px','47px'],
'pc-h4': ['20px','34px'],
'pc-h5': ['14px','24px'],
'pc-h6': ['12px','20px'],
'pc-p': ['18px','30px'],
'mb-h1': ['32px','54px'],
'mb-h2': ['28px','47px'],
'mb-h3': ['22px','37px'],
'mb-h4': ['18px','30px'],
'mb-h5': ['12px','20px'],
'mb-h6': ['12px','20px'],
'mb-p': ['16px','27px'],
},
zIndex: {
'-1': '-1',
},
width: {
'40': '160px',
'50': '200px',
'3col': 'calc((100% - 80px)/3)',
'2col': 'calc((100% - 40px)/2)',
}
}
},
variants: {
// 互動效果
extend: {
opacity: ['disabled'],
pointerEvents: ['disabled'],
backgroundColor: ['active','disabled'],
padding: ['responsive', 'last','first'],
margin: ['responsive', 'last','first'],
maxHeight: ['focus'],
divideColor: ['group-hover'],
textColor: ['group-hover'],
}
}
}
3-4. 搭配 scss 引用
npm install --save-dev sass sass-loader@10 fibers
nuxt.config.js
css: [
{ src: '@/assets/sass/all.scss', lang: 'scss' }
],
assets/sass/all.scss
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap');
// 引用字體
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
// tailwindcss延伸
.alert {
@apply bg-red-500;
}
3-5. 引用外部字體
<p class="font-zcoo text-pc-p">引用不同字體</p>
4. 注意點
disable 禁用<--只能運用在 button 這種有禁用的物件上